<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		#map{
			width: 100%;
			height: 100vh;
		}
	</style>
	<body>
		
		<div id="map"></div>
		<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=ds3CG1Z3mllhxbuxUg05nXnQ0WtevUdk"></script>
		<script>
			let map = new BMapGL.Map('map',{
				minZoom: 10,
				maxZoom: 19
			});
			map.centerAndZoom('北京市天安门', 16);
			map.enableScrollWheelZoom(true);
			let centrePoint = new BMapGL.Point(116.404269,39.914271);
			let circle = new BMapGL.Circle(centrePoint, 500, {
			    strokeColor: 'blue',
			    strokeWeight: 6,
			    strokeOpacity: 0.5
			});
			map.addOverlay(circle);
			let marker = new BMapGL.Marker(new BMapGL.Point(116.408572,39.918193));
			map.addOverlay(marker);
			function distance(start,end){
				let isDIstance = map.getDistance({lng:116.404269,lat:39.914271},{lng:start,lat:end});
				if(isDIstance > 500){
					return "不在范围内"
				}else{
					return '在范围内'
				}
			}
			console.log(distance(116.408572,39.918193))
		</script>
	</body>
</html>
